<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link href="assets/css/flexigrid.css" type="text/css" rel="stylesheet" />
    <script src="assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="assets/js/flexigrid.js" type="text/javascript"></script>
    <title>FlexTable例子</title>
</head>

<body>
    <div id="ptable" style="margin: 10px">
        <table id="flexTable" style="display: none"></table>
    </div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        var grid = $("#flexTable").flexigrid({
            width: 760,
            height: 280,
            //url: 'flexiGridServlet.do',
            url:'job.json',
            dataType: 'json',
            method:'get',
            colModel: [
                {
                    display: '编号',
                    name: 'id',
                    width: 50,
                    sortable: true,
                    align: 'center',
                    hide: false,
                    toggle: false
                },
                {
                    display: '工作名称',
                    name: 'job_name',
                    width: 250,
                    sortable: false,
                    align: 'center'
                },
                {
                    display: '工作地址',
                    name: 'work_address',
                    width: 100,
                    sortable: true,
                    align: 'center'
                },
                {
                    display: '工资',
                    name: 'salary',
                    width: 60,
                    sortable: true,
                    align: 'right',
                    process: formatMoney
                },
                {
                    display: '日期',
                    name: 'date',
                    width: 120,
                    sortable: true,
                    align: 'center'
                },
                {
                    display: '语言',
                    name: 'language',
                    width: 80,
                    sortable: true,
                    align: 'center'
                }],

            buttons: [
                {
                    name: 'add',
                    displayname: '新增',
                    bclass: 'add',
                    onpress: toolbarItem
                },
                { separator: true },
                {
                    name: 'modify',
                    displayname: '修改',
                    bclass: 'modify',
                    onpress: toolbarItem
                },
                { separator: true },
                {
                    name: 'delete',
                    displayname: '删除',
                    bclass: 'delete',
                    onpress: toolbarItem
                }
            ],
            searchitems: [
                { display: '编号', name: 'id', isdefault: true },
                { display: '工作名称', name: 'job_name' },
                { display: '工作地址', name: 'work_address' },
                { display: '语言', name: 'language' }
            ],
            errormsg: '发生异常',
            sortname: "id",
            sortorder: "desc",
            usepager: true,
            title: '信息发布管理Flexigrid',
            pagestat: '显示记录从{from}到{to}，总数{total}条',
            useRp: true,
            rp: 10,
            rpOptions: [10, 15, 20, 30, 40, 100],
            nomsg: '没有符合条件的记录存在',
            minColToggle: 1,
            showTableToggleBtn: true,
            autoload: true,
            resizable: false,
            procmsg: '加载中, 请稍等 ...',
            hideOnSubmit: true,
            blockOpacity: 0.5,
            showcheckbox: true,
            gridClass: "bbit-grid",
            rowhandler: false,
            rowbinddata: true,
            onrowchecked: callme
        });

        function callme() {
            alert("选中了");
        }
        function toolbarItem(com, grid) {
            if (com == 'delete') {
                deleteMe();
            } else if (com == 'add') {
                openDialogAdd();
            } else if (com == 'modify') {
                openDialogModify();
            }
        }
        //操作函数
        function formatMoney(value, pid) {
            return "￥" + parseFloat(value).toFixed(2);
        }
        function openDialogAdd() {
        }

        function openDialogModify() {
        }

        function deleteMe() {
        }
    });
</script>
</html>